<template>
    <div class="user-modal">
        <el-dialog v-model="dialogFormVisible" :title="(isNewRef ? '新建' : '修改') + '用户'" width="30%" center>
            <div class="form">
                <el-form :model="fomData" label-width="100px">
                    <el-form-item prop="name" label="姓名">
                        <el-input v-model="fomData.name" placeholder="请输入用户名" autocomplete="off" />
                    </el-form-item>
                    <el-form-item prop="realname" label="真实姓名">
                        <el-input v-model="fomData.realname" placeholder="请输入真实姓名" autocomplete="off" />
                    </el-form-item>
                    <el-form-item v-if="isNewRef" label="密码" prop="password">
                        <el-input v-model="fomData.password" show-password placeholder="请输入密码" type="password"
                            autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="电话号码" prop="cellphone">
                        <el-input v-model="fomData.cellphone" type="tel" placeholder="请输入电话号码" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="选择角色" prop="roleId">
                        <el-select v-model="fomData.roleId" placeholder="请选择角色">
                            <template v-for="item in entireRoles">
                                <el-option :label="item.name" :value="item.id" />
                            </template>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="选择部门" prop="departmentId">
                        <el-select v-model="fomData.departmentId" placeholder="请选择部门">
                            <template v-for="item in entireDepartments">
                                <el-option :label="item.name" :value="item.id" />
                            </template>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleComfirm">
                        确定
                    </el-button>
                </div>
            </template>
        </el-dialog>

    </div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue';
import useMainStore from '@/store/main/main'
import { storeToRefs } from 'pinia';
import useSystemStore from '@/store/main/system/system';

// 1.定义内部的属性
const dialogFormVisible = ref(false)
const fomData = reactive<any>({
    name: '',
    realname: '',
    password: '',
    cellphone: '',
    roleId: '',
    departmentId: ''
})
const isNewRef = ref(true)
const editData = ref()
// 2.定义roles/departments数据
const mainStore = useMainStore();
const systemStore = useSystemStore();
const { entireRoles, entireDepartments } = storeToRefs(mainStore)

// 2.定义设置dialogFormVisible方法
function setModalVisible(isNew: boolean = true, itemData?: any) {
    dialogFormVisible.value = true
    isNewRef.value = isNew
    if (!isNew && itemData) { // 编辑数据
        for (const key in fomData) {
            fomData[key] = itemData[key]
        }
        editData.value = itemData
    } else { // 新建数据
        for (const key in fomData) {
            fomData[key] = ''
        }
        editData.value = null
    }
}

// 点击了确定的逻辑
function handleComfirm() {
    // 创建新的用户
    if (!isNewRef.value && editData.value) {
        systemStore.editUserDataAction(editData.value.id, fomData)
    } else {
        systemStore.newUserDataAction(fomData)
    }
    dialogFormVisible.value = false
    ElMessage({
        message: `${isNewRef.value ? '创建' : '修改'}用户${fomData.name}成功~`,
        type: 'success',
        showClose: true
    })
}

// 暴露的属性和方法
defineExpose({ setModalVisible })

</script>
<style lang="less" scoped>
.user-modal {
    color: red;
}
</style>
